<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>更换背景颜色</title>
  <style>
    body {
      background: #959054;
      color: #fff;
      text-align: center;
      padding-top: 200px;
    }

    h1 {
      font-size: 40px;
    }

    button {
      color: #fff;
      width: 100px;
      height: 40px;
      background: transparent;
      border: 2px solid #fff;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
    }

    #end {
      margin-left: 20px;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>#959054</h1>
    <button id="start">更换背景</button><button id="end">停止</button>
  </div>
  <script>
    const startBtn = document.getElementById('start')
    const endBtn = document.getElementById('end')

    const body = document.querySelector('body')
    const h1 = document.querySelector('h1')

    let timer

    // 开始更换颜色
    startBtn.addEventListener('click', function () {
      // [经典问题]避免频繁点击加速问题
      clearInterval(timer)
      // let color = getColor()
      // // body 的背景颜色(先拿到body)
      // body.style.background = color
      // // h1 的innerHTML
      // h1.innerHTML = color

      // 每隔1s更换颜色
      let color
      timer =  setInterval(() => {
        color = getColor()
        // body 的背景颜色(先拿到body)
        body.style.background = color
        // h1 的innerHTML
        h1.innerHTML = color
      },1000);
    })

    // 结束颜色更换
    endBtn.addEventListener('click', function () {
      clearInterval(timer)
    })


    /**
     * @description: 获取一个16进制表示法的随机颜色
     * @return {*}:  #ffffff
     */

    // 获取随机颜色
    function getColor() {
      function getNum16() { //得一个16进制的数
        return Math.floor(Math.random() * 256).toString(16) //生成0-255随机数,并且传参生成16进制
      }
      return '#' + getNum16() + getNum16() + getNum16()
    }
    console.log(getColor());
  </script>
</body>

</html>